// generic drawing of more complex things


// ripple effect animations

@keyframes ripple_effect {
  to { background-size: 1000% 1000%; }
}

@keyframes scale_ripple_effect {
  to { background-size: auto, 1000% 1000%; }
}

@keyframes header_ripple_effect {
  from {
    background-image: radial-gradient(circle,
                                      $primary_color 0%,
                                      transparent 0%);
  }

  to {
    background-image: radial-gradient(circle,
                                      $primary_color 100%,
                                      transparent 0%);
  }
}


@mixin entry($t, $fc: $primary_color) {
//
// entry
//
// $t: entry type
// $fc: focus color
//

  @if $t == normal {
    transition: $shorter_transition;
    border-image: none;
    box-shadow: $shadow_1;
    background-color: if($fc == $primary_color, $button_bg_color, $fc);
    color: if($fc == $primary_color, $fg_color, $inverse_fg_color);
    outline: none;
  }

  @if $t == focus {
    border-image: none;
    box-shadow: $shadow_2;
    outline: none;
  }

  @if $t == disabled {
    box-shadow: none;
    background-color: $alt_base_color;
    color: $disabled_fg_color;
    outline: none;
  }

  @if $t == flat-normal {
    transition: $shorter_transition, box-shadow $longer_duration $deceleration_curve;
    box-shadow: inset 0 -1px if($fc == $primary_color, $track_color, $fc), inset 0 -2px transparent;
    background-color: transparent;
    color: $fg_color;
    outline: none;
  }

  @if $t == flat-focus {
    box-shadow: inset 0 -1px transparent, inset 0 -2px $fc;
    outline: none;
  }

  @if $t == flat-disabled {
    box-shadow: inset 0 -1px $divider_color, inset 0 -2px transparent;
    background-color: transparent;
    color: $disabled_fg_color;
    outline: none;
  }
}


@mixin button($t, $c: $lighter_bg_color) {
//
// button
//
// $t: button type
// $c: base color
//

  @if $t == normal {
    transition: $shorter_duration;
    box-shadow: $shadow_1;
    background-color: $button_bg_color;
    color: $button_fg_color;
    outline: none;
  }

  @if $t == hover {
    box-shadow: $shadow_2;
    color: $fg_color;
    outline: none;
  }

  @if $t == active {
    box-shadow: $shadow_2;
    color: $fg_color;
    background-color: $semi_fill_color;
    outline: none;
  }

  @if $t == disabled {
    box-shadow: none;
    background-color: $alt_base_color;
    color: if($c == $lighter_bg_color, $disabled_secondary_fg_color, $disabled_fg_color);
    outline: none;
  }

  @if $t == checked {
    background-color: $primary_color;
    color: $inverse_fg_color;
    background-image: $theme_image;
    background-size: auto auto;
    background-position: center center;
    background-repeat: no-repeat;
    outline: none;
  }

  @if $t == checked-disabled {
    background-color: rgba($primary_color, $lower_opacity);
    color: rgba($primary_color, $disabled_opacity);
    background-image: none;
  }

  @if $t == flat-normal {
    transition: $shorter_duration;
    box-shadow: none;
    background-color: transparent;
    color: $secondary_fg_color;
    outline: none;
  }

  @if $t == flat-hover {
    background-color: $semi_fill_color;
    color: $fg_color;
    outline: none;
  }

  @if $t == flat-active {
    background-color: $fill_color;
    color: $fg_color;
    background-image: none;
    outline: none;
  }

  @if $t == flat-disabled {
    box-shadow: none;
    background-color: transparent;
    color: if($c == $lighter_bg_color, $disabled_secondary_fg_color, $disabled_fg_color);
    outline: none;
  }

  @if $t == flat-checked {
    background-color: $track_color;
    color: $fg_color;
    background-image: none;
    outline: none;
  }

  @if $t == flat-checked-disabled {
    background-color: $divider_color;
    color: $disabled_fg_color;
    background-image: none;
  }
}


@mixin overshoot($p, $t:normal, $c:$fg_color) {
//
// overshoot
//
// $p: position
// $t: type
// $c: base color
//
// possible $p values:
// top, bottom, right, left
//
// possible $t values:
// normal, backdrop
//

  $_small_gradient_length: 3%;
  $_big_gradient_length: 50%;

  $_small_gradient_size: 100% $_small_gradient_length;
  $_big_gradient_size: 100% $_big_gradient_length;

  @if $p==right or $p==left {
    $_small_gradient_size: $_small_gradient_length 100%;
    $_big_gradient_size: $_big_gradient_length 100%;
  }

  $_small_gradient_color: $c;
  $_big_gradient_color: transparentize($c, 0.93);

  @if $c==$fg_color {
    $_small_gradient_color: darken($border_color, 10%);
    $_big_gradient_color: transparentize($fg_color, 0.93);

    @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; }
  }

  $_small_gradient: radial-gradient(farthest-side at $p,
                                    $_small_gradient_color 85%,
                                    transparentize($_small_gradient_color, 1));

  $_big_gradient: radial-gradient(farthest-side at $p,
                                  $_big_gradient_color,
                                  transparentize($_big_gradient_color, 1));

  @if $t==normal {
    background-image: $_small_gradient, $_big_gradient;
    background-size: $_small_gradient_size, $_big_gradient_size;
  }

  @else if $t==backdrop {
    background-image: $_small_gradient;
    background-size: $_small_gradient_size;
  }

  background-repeat: no-repeat;
  background-position: $p;

  background-color: transparent; // reset some properties to be sure to not inherit them somehow
  border: none;                  //
  box-shadow: none;              //
}


@mixin undershoot($p, $c: rgba(black, 0.08), $neighbor: false) {
//
// undershoot
//
// $p: position
// $c: shade color
// $neighbor: use ~ instead of >
//
// possible $p values:
// top, bottom, right, left
//

  $_border_pos: '';
  $_direction: '';
  $_selector: if($neighbor, '~', '>');

  @if $p==top {
    $_direction: bottom;
    $_border_pos: 0 1px;
  } @else if $p==bottom {
    $_direction: top;
    $_border_pos: 0 -1px;
  } @else if $p==left {
    $_direction: right;
    $_border_pos: 1px 0;
  } @else if $p==right {
    $_direction: left;
    $_border_pos: -1px 0;
  } @else {
    @error "Unknown position #{$p}"
  }
  
  #{$_selector} undershoot.#{$p} {
    box-shadow: inset $_border_pos $c;
    background: linear-gradient(to $_direction, gtkalpha($c, .75), transparent 4px);
  }
}

@mixin background-shadow($direction, $color) {
  background-image:
  linear-gradient($direction,
                  gtkalpha($color, 0.7),
                  gtkalpha($color, 0.14) 40px,
                  gtkalpha($color, 0) 56px),
  linear-gradient($direction,
                  gtkalpha($color, 0.4),
                  gtkalpha($color, 0.14) 7px,
                  gtkalpha($color, 0) 24px);
}

@mixin transition-shadows($color) {
  > dimming {
    background: none;
  }
  
  > border {
    background: none;
  }
  
  > shadow {
    min-width: 56px;
    min-height: 56px;
  
    &.left  { @include background-shadow(to right,  $color); }
    &.right { @include background-shadow(to left,   $color); }
    &.up    { @include background-shadow(to bottom, $color); }
    &.down  { @include background-shadow(to top,    $color); }
  }
}
